<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>域名和IP基础配置</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="line-height: normal">
            <div style="text-align: center;">
                <div class="layui-inline" style="width: 200px">
                    <input class="layui-input" name="huowuDesc" id="huowuDesc" placeholder="地址(IP/域名)" autocomplete="off">
                </div>

                <div class="layui-inline" style="line-height: normal;">
                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="huowuDesc-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>
<script>
    //url 传参
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var a = decodeURI(window.location.search);
        var r = a.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return  unescape(r[2]); return null;
    }
</script>
<script type="text/html" id="caozuo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="tb">
    <div class="layui-container" style="margin-left:0px;">
        <a class="layui-btn layui-btn-xs" lay-event="add">新增区域</a>
    </div>
</script>
<script src="/js/layui/layui.js"></script>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<script>
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;
    var upload = layui.upload;

    table.render({
        elem: '#t',
        id: 'tt',
        toolbar: '#tb',
        // toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
        url: '/peizhi/selectIP_yuming',
        cols: [
            [{field: '',fixed: 'left', unresize: true,title: '序号',type:'numbers',align: 'center',width: '5%'}
                , {field: 'ip_address', title: 'IP地址', align: "center",width:'25%'}
                , {field: 'yu_ming', title: '域名', align: "center",width:'25%'}
                , {field: 'type', title: '所属国家类型', align: "center",width:'15%',templet:function(res){
                    if(res.type == "0"){
                        return "国内";
                    }else {
                        return "国外";
                    }
                }}
                , {field: 'pd_type', title: '所属连接类型', align: "center",width:'15%',templet:function(res){
                    if(res.pd_type == "0"){
                        return "代理";
                    }else {
                        return "直连";
                    }
                }}
                ,{fixed: 'right',title: '操作',align: 'center',toolbar: '#caozuo',width:'15%'}
            ]
        ],
        limit:10,
        page: true,
        page: {

        },
        done: (res, curr, count) => {
            // console.log(res);
            layui.data("yuming_ip_page", {
                key: 'index',
                value: curr
            });
        }
    });
    //监听工具条
    table.on('tool(t)', function (obj) {
        var data = obj.data;
        // console.log(data);
        if (obj.event === 'edit') {
            // console.log("点编辑了");
            layer.open({
                type: 2,
                area: ['100%', '100%'],
                content: (encodeURI("update_yuming_ip.html?id="+data.id+"&ip_address="+data.ip_address+"&yu_ming="+data.yu_ming+"&type="+data.type+"&pd_type="+data.pd_type)), //这里content是一个普通的String
                end: function(){
                    table.reload('tt');
                }
            });
        }else if(obj.event === 'delete'){
            // 获取id
            var id= data.id;
            layer.confirm('您确定要删除吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.ajax({
                    url:'/peizhi/deleteYumingIp',
                    type:'POST', //GET
                    async:true,    //或false,是否异步
                    data:{
                        id:id,
                    },
                    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success:function(data){
                        console.log(data);
                        if(data.code==0) {
                            window.location.reload();
                            // 获得frame索引
                        }else {
                            layer.msg('删除失败');
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    },
                    complete:function(){
                        //console.log('结束')
                    }
                })
            }, function(){
                // 事务回调
            });
        }else if(obj.event === 'huifu'){
            // 获取id
            var id= data.id;
            layer.confirm('您确定要恢复吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.ajax({
                    url:'/cheliang/huifucheliang',
                    type:'POST', //GET
                    async:true,    //或false,是否异步
                    data:{
                        id:id,
                    },
                    timeout:5000,    //超时时间
                    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success:function(data){
                        console.log(data);
                        if(data.code==0) {
                            window.location.reload();
                            // 获得frame索引
                        }else {
                            layer.msg('恢复失败');
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    },
                    complete:function(){
                        //console.log('结束')
                    }
                })
            }, function(){
                // 事务回调
            });
        }
    });
    table.on('toolbar(t)', function (obj) {
        var data = obj.data;
        if (obj.event === 'add') {
            layer.open({
                type: 2,
                area: ['100%', '100%'],
                content: 'add_yuming_ip.html', //这里content是一个普通的String
                end: function(){
                    table.reload('tt');
                }
            });
        }
    });

    //搜索
    form.on('submit(huowuDesc-search)', function (data) {
        var country_id = $("#country_id").find("option:selected").val();
        // console.log("库位ID："+kwID);
        table.reload('tt', {
            where: {"name": data.field.huowuDesc}
            , page: {
                curr: 1
            }
        });
        return false;
    });

    form.on('select(country_id)', function(data){
        var kwID = data.value;
        var huowuDesc = $("#huowuDesc").val();
        table.reload('tt', {
            where: {"name": huowuDesc}
            , page: {
                curr: 1
            }
        });
    });

    $('.test-table-operate-btn .layui-btn').on('click', function () {
        var type = $(this).data('type')
        active[type] ? active[type].call(this) : ''
    });

</script>
</html>
